<template>
    <el-descriptions column="2" v-if="loaded">
        <el-descriptions-item label="合同名称">{{ contract.title }}</el-descriptions-item>
        <el-descriptions-item label="合同编号">
            {{ contract.code }}
        </el-descriptions-item>
        <el-descriptions-item label="合同类型">
            <z-text :modelValue="contract.categoryId" depend="category" size="large" />
        </el-descriptions-item>
        <el-descriptions-item label="合同状态">
            <z-dict readonly :modelValue="contract.status" code="contractStatus" />
        </el-descriptions-item>

        <el-descriptions-item>
            <el-steps style="max-width: 600px" :active="contract.stage" align-center>
                <el-step title="草拟" />
                <el-step title="审批" />
                <el-step title="签署" />
                <el-step title="归档" />
                <el-step title="履行" />
                <el-step title="完结" />
            </el-steps>
        </el-descriptions-item>
    </el-descriptions>
    <div class="form-spacing"></div>
    <el-tabs v-model="pane" v-if="loaded">
        <el-tab-pane label="风险信息" name="contract">
            <el-descriptions column="2" border>
                <el-descriptions-item label="风险内容">
                    {{ risk.content }}
                </el-descriptions-item>
                <el-descriptions-item label="风险类型">
                    <z-dict readonly :modelValue="risk.type" code="riskType" />
                </el-descriptions-item>
                <el-descriptions-item label="是否解除">
                    {{ risk.status ? '是' : '否' }}
                </el-descriptions-item>
                <el-descriptions-item label="创建人">
                    <z-avatar :value="risk.creator" :plain="false"/>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                    <z-date :value="risk.createGmt" />
                </el-descriptions-item>

            </el-descriptions>

        </el-tab-pane>
        <el-tab-pane label="处理记录" name="permission">
            <el-timeline style="max-width: 600px">
                <el-timeline-item 
                    :timestamp="new Date(risk.createGmt * 1000).toLocaleString()" placement="top"
                    :color="(risk.status == 1) ? '#0bbd87' : '#FF0000'">
                    <z-avatar :value="risk.creator" :plain="false" />
                    <div>创建风险</div>
                </el-timeline-item>
                <el-timeline-item v-if="risk.status == 1"
                    :timestamp="new Date(risk.updateGmt * 1000).toLocaleString()" placement="top"
                    color="#0bbd87">
                    <z-avatar :value="risk.finishUser" :plain="false" />
                    <div>解除风险</div>
                    解除说明：{{ risk.explain }}
                </el-timeline-item>
            </el-timeline>
        </el-tab-pane>
    </el-tabs>
</template>

<script>


export default {
    props: {
        params: Object
    },
    data() {
        return {
            contract: null,
            pane: 'contract',
            risk: null,
            loaded: false
        };
    },
    async created() {
        const id = this.params.id
        this.risk = await $.get({ url: "/do/get/risk", data: { id } })
        this.contract = await $.get({ url: "/do/get/contract", data: { id: this.risk.contractId } })
        this.loaded = true
    },
};
</script>
<style scoped>
.form-spacing {
    margin: 10px 0;
    height: 0;
    position: relative;
}

.header-container {
    display: flex;
    align-items: center;
    padding: 15px 0;
}
</style>
